<template>
    <div class="board-list-wrap" v-if="list.length">
        <flexbox class="title">
            <span class="font-w-b">{{ info.dimensionName }}</span>
            <a-badge :count="total" class="margin-l-8" />
        </flexbox>
        <div :class="['board-column', list.length ? '' : 'bg-empty']" v-if="list.length">
            <div class="board-column-wrap">
                <a-card
                    :bodyStyle="{ height: '90px', padding: '16px' }"
                    @click="showDetail(item.id)"
                    v-for="item of list"
                    :key="item.id"
                    style="margin-bottom: 8px"
                >
                    <flexbox orient="vertical" justify="space-between" align="flex-start" style="height: 100%">
                        <flexbox justify="space-between" style="width: 100%">
                            <a-tooltip v-bind="buildTooltip(item)">
                                <span class="primary-color" v-fitText style="flex: 1">{{ item.requestNumber }}</span>
                            </a-tooltip>
                            <a-tooltip v-bind="buildTooltip(item)">
                                <h-status-tag :status="item.status" class="margin-l-8" />
                            </a-tooltip>
                        </flexbox>
                        <div v-fitText style="width: 100%">
                            <a-tooltip :title="item.requestName">
                                {{ item.requestName }}
                            </a-tooltip>
                        </div>
                    </flexbox>
                </a-card>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import moment from 'moment';
import { HStatusTag } from '@/components';
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
export default defineComponent({
    components: {
        HStatusTag
    },
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        catalogCode: [String, Number]
    },
    setup(props) {
        const router = useRouter();
        const list = ref([]);
        const total = ref(0);
        const getList = async () => {
            let query: any = {
                stageOrStatus: 'status',
                status: null,
                admin: 1,
                stage: props.info.code,
                system: props.catalogCode,
                requestSystem: props.catalogCode // 业务需求的system
            };
            // 需求上线显示近一个月
            if (props.info.code === '11') {
                query = {
                    ...query,
                    startTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                    endTime: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss')
                };
            }
            const { success, moule, totalCount } = await api.pmpRequestInfoModel.selectPage(query);
            if (success) {
                list.value = moule;
                total.value = totalCount;
            }
        };
        const buildTooltip = (item) => {
            const props: any = {
                autoAdjustOverflow: true,
                arrowPointAtCenter: true
            };
            if (item.stage === '5') {
                if (item.status === '1') {
                    props.title = '您可以分析需求的必要性和可行性，决定接受/拒绝需求';
                }
                if (item.status === '2' && !item.pmpProductRequires) {
                    props.title = '您可以创建关联产品需求，列出针对此需求程序需要做哪些修改';
                }
                if (item.status === '2' && item.pmpProductRequires) {
                    const res = item.pmpProductRequires.some((item) => !item.relateVersionId);
                    if (res) {
                        props.title = '您可以新建一个研发计划，把要做的产品需求放到计划中';
                    } else {
                        props.visible = false;
                    }
                }
            } else {
                props.visible = false;
            }
            return props;
        };
        const showDetail = (id) => {
            router.push({
                path: '/taskRequire/taskDetail',
                query: {
                    id
                }
            });
        };
        useMountedAndActivated(getList);
        return {
            list,
            buildTooltip,
            showDetail,
            total
        };
    }
});
</script>

<style scoped lang="less">
.board-list-wrap {
    height: 100%;
    margin-right: 8px;
    .title {
        margin-bottom: 8px;
    }
    .board-column {
        width: 100%;
        height: 100%;
        display: inline-block;
        overflow: hidden;
        padding-bottom: 32px;
        &-wrap {
            cursor: pointer;
            max-height: 100%;
            vertical-align: top;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
    .bg-empty {
        background: #f4f5f7;
    }
}
</style>
